
<!DOCTYPE html>
<html lang="en" >

<head>
	<meta charset="UTF-8">
	<title>在线聊天室</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/reset.min.css">
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div class="wrapper">
		<div class="container">
			<div class="left">
				<div class="top"> 在线人员 </div>
				<ul class="people">
					<li class="person" data-chat="person1">
						<img src="img/thomas.jpg" alt="" />
						<span class="name">张三</span>
						<span class="time">10:09</span>
					</li>
					<li class="person" data-chat="person2">
						<img src="img/dog.png" alt="" />
						<span class="name">李四</span>
						<span class="time">10:44</span>
					</li>
					<li class="person" data-chat="person3">
						<img src="img/louis-ck.jpeg" alt="" />
						<span class="name">王五</span>
						<span class="time">10:50</span>
					</li>
				</ul>
			</div>
			<div class="right">
				<div class="top"><span><span class="name">聊天室</span></span></div>
				<div class="chat" data-chat="person2">
				<template v-for="item in msglist">
					<div :class="item.style">
						{{item.data}}
					</div>
				</template>
				</div>
				
				<div class="write">
					<input type="text" v-model="msg" placeholder="输入内容" @keydown.enter="send"/>
					<a @click.prevent="send" class="write-link send"></a>
				</div>
			</div>
		</div>
	</div>

	<script  src="js/index.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
		const  ws =new WebSocket('ws://121.4.59.57:9501');
		ws.onopen = () =>{
			console.log('建立连接');
		}
		ws.onmessage = ({data}) =>{
			console.log(data);
			let json = JSON.parse(data);
            vm.msglist.push(json);
		}

		const vm = new Vue({
			el:'.wrapper',
			data:{
				msg:'',
				msglist:[]
			},
			methods:{
				send(){
					ws.send(this.msg);
					this.msg='';
				}
			}
		})
	</script>
</body>

</html>
